<template>
  <div>
    <el-row class="margin-bottom-10">
      <el-input
        v-model="query.content"
        size="medium"
        placeholder="请输入搜索内容"
        clearable
        style="width: 300px;margin-right: 10px"
        @keyup.enter.native="search()"
      >
        <el-button
          size="small"
          slot="append"
          icon="el-icon-search"
          @click="search"
        ></el-button>
      </el-input>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="handleAdd"
      >
        添加
      </el-button>
      <el-button
        type="danger"
        size="small"
        icon="el-icon-close"
        @click="handleMoreDelete()"
      >
        批量删除
      </el-button>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="handleUpdateResource"
      >
        更新资源
      </el-button>
    </el-row>

    <el-table
      ref="roleTable"
      :data="resourceList"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" width="55" label="序号"></el-table-column>
      <el-table-column label="资源(接口)" sortable prop="name">
      </el-table-column>
      <el-table-column label="拥有者" prop="owner"></el-table-column>
      <el-table-column
        prop="resourceType"
        label="接口类型"
        :filters="[
          { text: '基础接口', value: 0 },
          { text: '权限接口', value: 1 },
          { text: '自动权限接口', value: 2 }
        ]"
        :filter-method="filterResourceType"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            disable-transitions
            effect="plain"
            v-if="scope.row.resourceType === 0"
            >基础接口
          </el-tag>
          <el-tag
            type="success"
            disable-transitions
            effect="plain"
            v-else-if="scope.row.resourceType === 1"
            >权限接口
          </el-tag>
          <el-tag
            type="warning"
            disable-transitions
            effect="plain"
            v-else-if="scope.row.resourceType === 2"
            >自动权限接口
          </el-tag>
          <el-tag type="danger" effect="plain" disable-transitions v-else
            >未知类型
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="httpMethod"
        label="请求类型"
        :filters="[
          { text: 'get', value: 'get' },
          { text: 'post', value: 'post' },
          { text: 'delete', value: 'delete' },
          { text: 'put', value: 'put' }
        ]"
        :filter-method="filterHttpMethod"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag disable-transitions v-if="scope.row.httpMethod === 'get'"
            >{{ scope.row.httpMethod }}
          </el-tag>
          <el-tag
            type="success"
            disable-transitions
            v-else-if="scope.row.httpMethod === 'post'"
            >{{ scope.row.httpMethod }}
          </el-tag>
          <el-tag
            type="danger"
            disable-transitions
            v-else-if="scope.row.httpMethod === 'delete'"
            >{{ scope.row.httpMethod }}
          </el-tag>
          <el-tag type="warning" disable-transitions v-else
            >{{ scope.row.httpMethod }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="资源描述" prop="description"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="handleEdit(scope.row)"
            >编辑
          </el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="handleDelete(scope.row.id, scope.row.name)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="flex-row-center margin-top-10"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="query.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogResource"
      width="50%"
      @close="closeDialog"
    >
      <el-form
        class="resourceForm"
        ref="resourceForm"
        :model="resourceForm"
        :rules="resourceFormRules"
        label-width="80px"
      >
        <el-form-item label="接口路径" prop="name">
          <el-input
            v-model="resourceForm.name"
            :disabled="isDisabled"
            placeholder="请输入接口路径"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="资源描述">
          <el-input
            v-model="resourceForm.description"
            type="textarea"
            placeholder="请输入资源描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="接口类型" prop="resourceType">
          <el-select
            v-model="resourceForm.resourceType"
            placeholder="请选择接口类型"
          >
            <el-option label="基础接口" :value="0"></el-option>
            <el-option label="权限接口" :value="1"></el-option>
            <el-option label="自动权限接口" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请求类型">
          <el-select
            v-model="resourceForm.httpMethod"
            placeholder="请选择或输入接口请求类型"
            allow-create
            filterable
            clearable
          >
            <el-option label="get" value="get"></el-option>
            <el-option label="post" value="post"></el-option>
            <el-option label="delete" value="delete"></el-option>
            <el-option label="put" value="put"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="拥有者">
          <el-select
            v-model="resourceForm.owner"
            multiple
            filterable
            clearable
            placeholder="请选择资源拥有者"
          >
            <el-option
              v-for="item in roleList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="handleSubmit"
            >确 定
          </el-button>
          <el-button size="small" @click="closeDialog">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getResource,
  saveOrUpdateResource,
  deleteResource,
  addResource
} from "api/resource";
import { getRoles } from "api/role";
import { isEmpty } from "@/utils/validate";

const defaultResource = {
  id: "",
  name: "",
  owner: [],
  description: "",
  resourceType: "",
  httpMethod: ""
};
export default {
  name: "Resource",
  data() {
    return {
      // 查询条件
      query: {
        current: 1, // 当前页
        size: 10, // 每页大小
        content: "" // 搜索内容
      },
      total: 0, // 数据总数
      resourceList: [], // 资源列表
      dialogTitle: "",
      dialogResource: false,
      resourceForm: Object.assign({}, defaultResource),
      isDisabled: false, //是否禁止编辑接口
      resourceFormRules: {
        name: [{ required: true, message: "请输入资源路径", trigger: "blur" }],
        resourceType: [
          { required: true, message: "请选择资源类型", trigger: "blur" }
        ]
      }, // 检验规则
      roleList: [], // 角色列表
      multipleSelectionId: [], // 多选时的id
      multipleSelectionName: [] // 多选时的name
    };
  },
  created() {
    this.initData();
    this.initData2();
  },
  methods: {
    // 初始化数据
    initData() {
      getResource(this.query).then(res => {
        let data = res.data.page;
        this.resourceList = data.records;
        this.total = data.total;
      });
    },
    initData2() {
      getRoles().then(res => {
        let data = res.data.list;
        for (let i = 0; i < data.length; i++) {
          this.roleList.push(data[i].name);
        }
      });
    },
    search() {
      this.initData();
    },
    filterResourceType(value, row) {
      return row.resourceType === value;
    },
    filterHttpMethod(value, row) {
      return row.httpMethod === value;
    },
    handleAdd() {
      this.dialogResource = true;
      this.dialogTitle = "添加资源";
    },
    handleEdit(row) {
      this.isDisabled = true;
      this.dialogTitle = "修改资源";
      this.dialogResource = true;
      // 深拷贝，避免影响表格数据
      let data = JSON.parse(JSON.stringify(row));
      data.owner = isEmpty(data.owner) ? [] : data.owner.split(",");
      this.resourceForm = data;
    },
    handleSubmit() {
      this.$refs.resourceForm.validate(valid => {
        if (valid) {
          this.resourceForm.owner = this.resourceForm.owner.toString();
          saveOrUpdateResource(this.resourceForm).then(res => {
            this.initData();
            this.$message.success(res.message);
            this.closeDialog();
          });
        } else {
          return false;
        }
      });
    },
    // 删除资源
    handleDelete(ids, names) {
      this.$confirm("确定删除该资源吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteResource({ id: ids, name: names }).then(res => {
            this.$message.success(res.message);
            this.initData();
          });
          this.multipleSelectionId = [];
          this.multipleSelectionName = [];
        })
        .catch(() => {});
    },
    // 批量删除
    handleMoreDelete() {
      if (!this.multipleSelectionId.length > 0) {
        this.$message.warning("请勾选要删除的资源");
      } else {
        this.handleDelete(
          this.multipleSelectionId.toString(),
          this.multipleSelectionName.toString()
        );
      }
    },
    handleSelectionChange(val) {
      if (val.length > 0) {
        for (let i = 0, len = val.length; i < len; i++) {
          this.multipleSelectionId.push(val[i].id);
          this.multipleSelectionName.push(val[i].name);
        }
      } else {
        this.multipleSelectionId = [];
        this.multipleSelectionName = [];
      }
    },
    // 每页大小发生变化时执行
    handleSizeChange(val) {
      this.query.size = val;
      this.initData();
      // console.log(`每页 ${val} 条`);
    },
    // 当前页发生变化时执行
    handleCurrentChange(val) {
      this.query.current = val;
      this.initData();
      // console.log(`当前页: ${val}`);
    },
    closeDialog() {
      this.isDisabled = false;
      this.dialogResource = false;
      this.resourceForm = Object.assign({}, defaultResource);
      this.$refs.resourceForm.clearValidate();
    },
    // 更新资源，从swagger获取接口加入数据库，并把权限接口塞进redis
    handleUpdateResource() {
      this.$confirm("确定更新资源表数据和redis中资源接口吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          addResource().then(res => {
            this.$message.success(res.message);
            this.initData();
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.resourceForm {
  max-height: 60vh;
  overflow: auto;
}
</style>
